.contact-section {
    max-width: 1140px; /* Standard container width */
    margin: 30px auto; /* Center the section with space */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Important for border-radius and floats/flex */
    display: block; /* Default stacking layout for mobile */
    padding: 25px; /* Padding for mobile */
}

/* Left side: Contact Information */
.contact-info {
    margin-bottom: 30px; /* Space below info on mobile */
}

    .contact-info h2 {
        font-size: 2.4em; /* Larger heading */
        color: #0d6efd; /* Blue color */
        margin-bottom: 15px;
        font-weight: 600;
    }

    .contact-info .intro-text {
        color: #555;
        margin-bottom: 35px;
        font-size: 1em;
    }

    .contact-info h3 {
        font-size: 1.3em;
        color: #212529; /* Darker heading */
        margin-top: 25px;
        margin-bottom: 15px;
        font-weight: 600;
        /* Optional: Add a subtle border like the image had under the text */
        /* padding-bottom: 8px; */
        /* border-bottom: 1px solid #eee; */
        /* display: inline-block; */ /* If using border-bottom */
    }

    .contact-info p {
        color: #444;
        margin-bottom: 12px; /* Consistent spacing */
        display: flex; /* Align icon and text */
        align-items: flex-start; /* Align to top */
        gap: 12px; /* Space between icon and text */
        font-size: 0.95em;
    }

        .contact-info p .icon {
            color: #555; /* Icon color */
            font-size: 1.1em; /* Icon size */
            margin-top: 3px; /* Adjust vertical alignment */
            flex-shrink: 0; /* Prevent icon shrinking */
            width: 20px; /* Fixed width for alignment */
            text-align: center;
        }
        /* Specific icon adjustments if needed */
        .contact-info p .fa-whatsapp {
            font-size: 1.2em; /* Make whatsapp icon slightly larger */
        }

        .contact-info p a {
            color: #0d6efd; /* Link color */
            text-decoration: none;
            word-break: break-word; /* Allow wrapping */
        }

            .contact-info p a:hover {
                text-decoration: underline;
            }

/* Social Icons Styling */
.social-icons {
    margin-top: 35px;
    display: flex;
    gap: 18px; /* Space between icons */
    flex-wrap: wrap;
    align-items: center;
}

    .social-icons a img {
        display: block;
        width: 30px; /* Adjust social icon size */
        height: 30px;
        transition: transform 0.2s ease-in-out;
    }

    .social-icons a:hover img {
        transform: scale(1.1); /* Hover effect */
    }


/* Right side: Map */
.contact-map {
    /* No specific styles needed here for mobile other than defaults */
}

    .contact-map iframe {
        display: block; /* Remove extra space below iframe */
        width: 100%;
        height: 350px; /* Default height for mobile */
        border: none;
        border-radius: 5px; /* Optional */
    }

/* --- Responsive Styles --- */

/* Tablets and larger */
@media (min-width: 768px) {
    .contact-section {
        display: flex; /* Arrange info and map side-by-side */
        gap: 30px; /* Space between the two columns */
        padding: 40px; /* Increase padding */
    }

    .contact-info {
        flex: 1 1 45%; /* Takes up 45% of the available space */
        margin-bottom: 0; /* No margin needed when side-by-side */
        padding-right: 20px; /* Add some space before the map column */
    }

    .contact-map {
        flex: 1 1 55%; /* Takes up 55% */
        min-height: 450px; /* Ensure map has a good height */
        display: flex; /* To make iframe fill height */
    }

        .contact-map iframe {
            height: 100%; /* Make iframe fill the map container height */
            min-height: 450px; /* Match container min-height */
        }

    .contact-info h2 {
        font-size: 2.6em;
    }

    .contact-info h3 {
        font-size: 1.4em;
    }
}

/* Larger Desktops */
@media (min-width: 1200px) {
    .contact-section {
        gap: 50px; /* Increase gap for wider screens */
        padding: 50px;
    }

    .contact-info {
        padding-right: 30px;
    }

    .contact-map {
        min-height: 500px;
    }

        .contact-map iframe {
            min-height: 500px;
        }

    .contact-info h2 {
        font-size: 2.8em;
    }
}